import React from 'react'
import tagsCss from "../css/tags.module.css"
import { useState, useEffect } from "react"
import News from "./News"
function Tags() {
  let arr = [
    { tagid: 0, type: "全部", name: "all" },
    { tagid: 1, type: "数码电器", name: 'shuma' },
    { tagid: 2, type: "体育运动", name: 'sport' },
    { tagid: 3, type: "家具", name: 'jiaju' },
    { tagid: 4, type: "医疗健康", name: 'healthy' },
    { tagid: 5, type: "其他", name: "other" },
    { tagid: 6, type: "奢侈品", name: 'shechi' },
    { tagid: 7, type: "汽车", name: 'car' },
    { tagid: 8, type: "美妆个护", name: 'meizhuang' },
    { tagid: 9, type: "服饰时尚", name: 'cloth' },
    { tagid: 10, type: "宠物", name: 'pet' }];

  const [isShow, setisShow] = useState(0)
  const [myType, setmyType] = useState("全部")
  let changeType = (type, index) => {
    setisShow(index);
    setmyType(type);
  }

  return (
    <div>
      <div className={tagsCss.tags}>
        {arr.map((item, index) => {
          return <span key={item.tagid} onClick={() => { changeType(item.type, index) }} className={isShow === index ? tagsCss.borderActive : ""}>{item.type}</span>
        })}
      </div>
      <hr className={tagsCss.whiteHr} />
      <News myType={myType}></News>
    </div>

  )
}

export default Tags
